<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>架构管理 - 一体化作战平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#0099cc',
                        success: '#009966',
                        warning: '#ff9900',
                        danger: '#cc3300',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#c0c4cc',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1f2937',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            
            /* 架构模式切换相关样式 */
            .arch-mode-btn {
                transition: all 200ms ease-in-out;
            }
            .arch-mode-btn:hover {
                transform: translateY(-1px);
            }
            .arch-mode-dropdown {
                transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
                opacity: 0;
                transform: translateY(-5px);
                pointer-events: none;
            }
            .arch-mode-dropdown:not(.hidden) {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }
            /* 现状/目标卡片样式 */
            .arch-status-card {
                border-left: 4px solid #0066cc;
            }
            .arch-target-card {
                border-left: 4px solid #009966;
            }
            /* 架构差异高亮 */
            .diff-highlight {
                background-color: rgba(255, 153, 0, 0.1);
                border-radius: 4px;
                padding: 2px 4px;
            }
            /* 进度指示器样式 */
            .progress-indicator {
                height: 4px;
                border-radius: 2px;
                background-color: #e4e7ed;
                overflow: hidden;
            }
            .progress-bar {
                height: 100%;
                border-radius: 2px;
                transition: width 500ms ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary rounded-md flex items-center justify-center text-white">
                    <i class="fa fa-bank text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-neutral-700 hidden md:block">一体化作战平台</h1>
                <h1 class="text-lg font-bold text-neutral-700 md:hidden">研发交付平台</h1>
            </div>
            
            <!-- 搜索框 -->
            <div class="hidden md:flex relative flex-1 max-w-md mx-4">
                <input type="text" placeholder="搜索任务..." 
                    class="w-full pl-10 pr-4 py-2 rounded-md border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>
            
            <!-- 右侧用户区域 -->
            <div class="flex items-center space-x-1 md:space-x-4">
                <!-- 通知按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bell-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                
                <!-- 消息按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300 hidden md:block">
                    <i class="fa fa-envelope-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full"></span>
                </button>
                
                <!-- 用户头像 -->
                <div class="flex items-center space-x-2 ml-2">
                    <div class="w-8 h-8 bg-neutral-200 rounded-full overflow-hidden">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <span class="hidden md:block text-sm font-medium text-neutral-700">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex pt-16 flex-1">
        <!-- 左侧导航菜单 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm fixed h-full left-0 top-16 overflow-y-auto scrollbar-hide transform md:transform-none transition-transform duration-300 z-40 -translate-x-full md:translate-x-0">
            <nav class="py-4">
                <ul>
                    <!-- 主导航项 -->
                    <li class="mb-1">
                        <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-tachometer text-lg"></i>
                            <span class="hidden md:block">首页</span>
                        </a>
                    </li>
                    
                    <!-- 交付流程模块 -->
                    <li class="mb-1">
                        <a href="business_strategy.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-line-chart text-lg"></i>
                            <span class="hidden md:block">业务战略</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="architecture-management.html" class="flex items-center space-x-3 px-4 py-3 text-primary bg-primary/5 border-r-4 border-primary">
                            <i class="fa fa-sitemap text-lg"></i>
                            <span class="hidden md:block font-medium">架构管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="requirementsManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-list-alt text-lg"></i>
                            <span class="hidden md:block">需求管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="design-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="design_management.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-paint-brush text-lg"></i>
                                    <span class="hidden md:block">设计管理</span>
                                </a>
                                <button id="design-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="design-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="interface_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-plug text-sm"></i>
                                        <span class="hidden md:block">接口管理</span>
                                    </a>
                                    <a href="model_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cubes text-sm"></i>
                                        <span class="hidden md:block">模型管理</span>
                                    </a>
                                    <a href="data_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-database text-sm"></i>
                                        <span class="hidden md:block">字典管理</span>
                                    </a>
                                    <a href="ui_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-desktop text-sm"></i>
                                        <span class="hidden md:block">差异分析</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="schedule_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-calendar text-lg"></i>
                            <span class="hidden md:block">排期管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="developmentMage.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-code text-lg"></i>
                            <span class="hidden md:block">开发管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="test-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="testManagement.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-bug text-lg"></i>
                                    <span class="hidden md:block">测试管理</span>
                                </a>
                                <button id="test-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="test-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="test_cases.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-file-text-o text-sm"></i>
                                        <span class="hidden md:block">测试案例</span>
                                    </a>
                                    <a href="test_plans.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-calendar-check-o text-sm"></i>
                                        <span class="hidden md:block">测试计划</span>
                                    </a>
                                    <a href="test_reports.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-bar-chart text-sm"></i>
                                        <span class="hidden md:block">测试报告</span>
                                    </a>
                                    <a href="test_global_settings.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cogs text-sm"></i>
                                        <span class="hidden md:block">全局设置</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="production_workflow.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-rocket text-lg"></i>
                            <span class="hidden md:block">投产上线</span>
                        </a>
                    </li>
                    
                    <!-- 新增的三个子菜单项 -->
                    <li class="mb-1">
                        <a href="quality_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-check-circle text-lg"></i>
                            <span class="hidden md:block">质量管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="security_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-shield text-lg"></i>
                            <span class="hidden md:block">安全管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="efficiency_metrics.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-bar-chart text-lg"></i>
                            <span class="hidden md:block">效能度量</span>
                        </a>
                    </li>
                    
                    <!-- 分隔线 -->
                    <li class="my-2">
                        <div class="border-t border-neutral-200 mx-4"></div>
                    </li>
                    
                    <!-- 公共模块 -->
                    <li class="mb-1">
                        <a href="teamManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-users text-lg"></i>
                            <span class="hidden md:block">团队管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="settings.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-cog text-lg"></i>
                            <span class="hidden md:block">设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-16 md:ml-64 p-4 md:p-6 bg-neutral-100 min-h-screen">
            <!-- 架构管理内容 -->
            <div id="architecture-management-content">
                <div class="flex justify-between items-center mb-6">
                    <div>
                        <h1 class="text-xl font-bold text-neutral-800">架构管理</h1>
                        <div class="text-sm text-neutral-500 mt-1">
                            <span>首页</span> &gt; <span>架构管理</span>
                        </div>
                    </div>
                </div>

                <!-- 二级架构类型切换 -->
                <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                    <div class="flex flex-wrap gap-1 mb-2">
                        <div class="relative inline-block">
                            <button id="arch-business-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-primary text-white text-sm flex items-center transition-all-300">
                                <i class="fa fa-sitemap text-sm mr-2"></i> 业务架构
                            </button>
                            <div class="absolute -top-8 left-0 flex space-x-1 bg-white rounded-md shadow-md p-1 hidden arch-mode-dropdown" id="business-mode-dropdown">
                                <button class="px-2 py-1 text-xs bg-primary text-white rounded-md arch-mode-btn" data-mode="current" data-arch="business">现状</button>
                                <button class="px-2 py-1 text-xs text-neutral-700 hover:bg-neutral-100 rounded-md arch-mode-btn" data-mode="target" data-arch="business">目标</button>
                            </div>
                        </div>
                        
                        <div class="relative inline-block">
                            <button id="arch-data-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300">
                                <i class="fa fa-database text-sm mr-2"></i> 数据架构
                            </button>
                            <div class="absolute -top-8 left-0 flex space-x-1 bg-white rounded-md shadow-md p-1 hidden arch-mode-dropdown" id="data-mode-dropdown">
                                <button class="px-2 py-1 text-xs bg-primary text-white rounded-md arch-mode-btn" data-mode="current" data-arch="data">现状</button>
                                <button class="px-2 py-1 text-xs text-neutral-700 hover:bg-neutral-100 rounded-md arch-mode-btn" data-mode="target" data-arch="data">目标</button>
                            </div>
                        </div>
                        
                        <div class="relative inline-block">
                            <button id="arch-app-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300">
                                <i class="fa fa-puzzle-piece text-sm mr-2"></i> 应用架构
                            </button>
                            <div class="absolute -top-8 left-0 flex space-x-1 bg-white rounded-md shadow-md p-1 hidden arch-mode-dropdown" id="app-mode-dropdown">
                                <button class="px-2 py-1 text-xs bg-primary text-white rounded-md arch-mode-btn" data-mode="current" data-arch="app">现状</button>
                                <button class="px-2 py-1 text-xs text-neutral-700 hover:bg-neutral-100 rounded-md arch-mode-btn" data-mode="target" data-arch="app">目标</button>
                            </div>
                        </div>
                        
                        <div class="relative inline-block">
                            <button id="arch-tech-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300">
                                <i class="fa fa-cogs text-sm mr-2"></i> 技术架构
                            </button>
                            <div class="absolute -top-8 left-0 flex space-x-1 bg-white rounded-md shadow-md p-1 hidden arch-mode-dropdown" id="tech-mode-dropdown">
                                <button class="px-2 py-1 text-xs bg-primary text-white rounded-md arch-mode-btn" data-mode="current" data-arch="tech">现状</button>
                                <button class="px-2 py-1 text-xs text-neutral-700 hover:bg-neutral-100 rounded-md arch-mode-btn" data-mode="target" data-arch="tech">目标</button>
                            </div>
                        </div>
                        
                        <div class="relative inline-block">
                            <button id="arch-security-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300">
                                <i class="fa fa-shield text-sm mr-2"></i> 安全架构
                            </button>
                            <div class="absolute -top-8 left-0 flex space-x-1 bg-white rounded-md shadow-md p-1 hidden arch-mode-dropdown" id="security-mode-dropdown">
                                <button class="px-2 py-1 text-xs bg-primary text-white rounded-md arch-mode-btn" data-mode="current" data-arch="security">现状</button>
                                <button class="px-2 py-1 text-xs text-neutral-700 hover:bg-neutral-100 rounded-md arch-mode-btn" data-mode="target" data-arch="security">目标</button>
                            </div>
                        </div>
                        
                        <div class="relative inline-block">
                            <button id="arch-assets-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300">
                                <i class="fa fa-archive text-sm mr-2"></i> 架构存量资产
                            </button>
                        </div>
                        
                        <div class="relative inline-block">
                            <button id="arch-governance-btn" class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300">
                                <i class="fa fa-gavel text-sm mr-2"></i> 架构评审与治理
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 架构内容区域 -->
                <div class="space-y-6">
                    <!-- 业务架构内容 -->
                    <div id="business-architecture-content" class="arch-content">
                        <!-- 业务架构现状/目标显示区域 -->
                        <div id="business-arch-mode-display" class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="text-lg font-semibold text-neutral-700" id="business-arch-title">业务架构 - 现状</h3>
                                <span class="text-sm px-3 py-1 bg-warning/10 text-warning rounded-full" id="business-arch-status">优化中</span>
                            </div>
                            <p class="text-neutral-600 mb-3" id="business-arch-description">
                                当前业务架构以传统部门为中心，存在信息孤岛和流程冗余
                            </p>
                            
                            <!-- 进度指示器 -->
                            <div class="mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-neutral-500">架构转型进度</span>
                                    <span class="font-medium text-primary">45%</span>
                                </div>
                                <div class="progress-indicator">
                                    <div class="progress-bar bg-primary" style="width: 45%"></div>
                                </div>
                            </div>
                            
                            <!-- 特点列表 -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-2">主要特点</h4>
                                    <ul class="space-y-1 text-sm" id="business-arch-highlights">
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>部门协作效率低</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>业务流程分散</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>数据不共享</span>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-2">改进重点</h4>
                                    <ul class="space-y-1 text-sm">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>建立跨部门协作机制</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>优化端到端业务流程</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>构建统一数据共享平台</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 业务架构横向导航 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-secondary text-white text-sm transition-all-300">
                                    业务领域管理
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    业务组件管理
                                </button>
                            </div>
                        </div>

                        <!-- 业务领域管理内容 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">业务领域管理</h3>
                                <div class="flex space-x-2">
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-filter mr-1"></i> 筛选
                                    </button>
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-sort mr-1"></i> 排序
                                    </button>
                                </div>
                            </div>

                            <!-- 业务领域视图切换 -->
                            <div class="flex items-center space-x-2 mb-4">
                                <button class="px-3 py-1 text-sm bg-primary/10 text-primary border border-primary/30 rounded-md hover:bg-primary/20 transition-all-300">
                                    业务领域
                                </button>
                                <button class="px-3 py-1 text-sm bg-white text-neutral-700 border border-neutral-200 rounded-md hover:bg-neutral-50 transition-all-300">
                                    业务事件
                                </button>
                                <button class="px-3 py-1 text-sm bg-white text-neutral-700 border border-neutral-200 rounded-md hover:bg-neutral-50 transition-all-300">
                                    活动
                                </button>
                            </div>

                            <!-- 业务领域视图 -->
                            <div class="bg-neutral-50 rounded-lg p-4">
                                <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4">
                                    <!-- 业务领域卡片 -->
                                    <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-primary cursor-pointer hover:shadow-md transition-all-300">
                                        <div class="flex items-center justify-between mb-2">
                                            <h4 class="font-medium text-neutral-700">IT战略管理</h4>
                                            <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">核心</span>
                                        </div>
                                        <p class="text-sm text-neutral-500 mb-3">负责银行整体IT战略规划与落地</p>
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs text-neutral-400">架构师: 张三</span>
                                            <div class="flex space-x-1">
                                                <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">12个事件</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-secondary cursor-pointer hover:shadow-md transition-all-300">
                                        <div class="flex items-center justify-between mb-2">
                                            <h4 class="font-medium text-neutral-700">企业架构管理</h4>
                                            <span class="text-xs px-2 py-1 bg-secondary/10 text-secondary rounded-full">核心</span>
                                        </div>
                                        <p class="text-sm text-neutral-500 mb-3">负责企业级架构设计与治理</p>
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs text-neutral-400">架构师: 李四</span>
                                            <div class="flex space-x-1">
                                                <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">8个事件</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-success cursor-pointer hover:shadow-md transition-all-300">
                                        <div class="flex items-center justify-between mb-2">
                                            <h4 class="font-medium text-neutral-700">需求管理</h4>
                                            <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">核心</span>
                                        </div>
                                        <p class="text-sm text-neutral-500 mb-3">负责业务需求的收集、分析与管理</p>
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs text-neutral-400">架构师: 王五</span>
                                            <div class="flex space-x-1">
                                                <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">15个事件</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-warning cursor-pointer hover:shadow-md transition-all-300">
                                        <div class="flex items-center justify-between mb-2">
                                            <h4 class="font-medium text-neutral-700">设计管理</h4>
                                            <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">标准</span>
                                        </div>
                                        <p class="text-sm text-neutral-500 mb-3">负责系统设计与方案评审</p>
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs text-neutral-400">架构师: 赵六</span>
                                            <div class="flex space-x-1">
                                                <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">10个事件</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-danger cursor-pointer hover:shadow-md transition-all-300">
                                        <div class="flex items-center justify-between mb-2">
                                            <h4 class="font-medium text-neutral-700">开发管理</h4>
                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">标准</span>
                                        </div>
                                        <p class="text-sm text-neutral-500 mb-3">负责应用开发与代码管理</p>
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs text-neutral-400">架构师: 孙七</span>
                                            <div class="flex space-x-1">
                                                <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">7个事件</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-primary cursor-pointer hover:shadow-md transition-all-300">
                                        <div class="flex items-center justify-between mb-2">
                                            <h4 class="font-medium text-neutral-700">测试管理</h4>
                                            <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">标准</span>
                                        </div>
                                        <p class="text-sm text-neutral-500 mb-3">负责系统测试与质量保证</p>
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs text-neutral-400">架构师: 周八</span>
                                            <div class="flex space-x-1">
                                                <span class="text-xs px-2 py-0.5 bg-success/10 text-success rounded-full">9个事件</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 数据架构内容 (默认隐藏) -->
                    <div id="data-architecture-content" class="arch-content hidden">
                        <!-- 数据架构现状/目标显示区域 -->
                        <div id="data-arch-mode-display" class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="text-lg font-semibold text-neutral-700" id="data-arch-title">数据架构 - 现状</h3>
                                <span class="text-sm px-3 py-1 bg-primary/10 text-primary rounded-full" id="data-arch-status">进行中</span>
                            </div>
                            <p class="text-neutral-600 mb-3" id="data-arch-description">
                                当前数据架构以关系型数据库为主，数据集成度低，缺乏统一的数据管理策略
                            </p>
                            
                            <!-- 进度指示器 -->
                            <div class="mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-neutral-500">架构转型进度</span>
                                    <span class="font-medium text-primary">60%</span>
                                </div>
                                <div class="progress-indicator">
                                    <div class="progress-bar bg-primary" style="width: 60%">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 特点列表 -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-2">主要特点</h4>
                                    <ul class="space-y-1 text-sm" id="data-arch-highlights">
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>数据孤岛现象严重</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>数据质量参差不齐</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>缺乏实时分析能力</span>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-2">改进重点</h4>
                                    <ul class="space-y-1 text-sm">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>建立数据湖平台</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>实施数据治理框架</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>构建实时数据分析能力</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 数据架构横向导航 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-secondary text-white text-sm transition-all-300">
                                    业务对象
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    业务实体
                                </button>
                            </div>
                        </div>

                        <!-- 业务对象内容 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">业务对象管理</h3>
                                <button class="text-primary text-sm hover:underline">查看详情</button>
                            </div>

                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-neutral-200">
                                    <thead class="bg-neutral-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                                对象名称
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                                描述
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                                所属业务域
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                                数据分类
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                                负责人
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                                操作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                                客户
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                                银行服务对象，包含个人和企业客户
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
                                                    零售银行
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-neutral-100 text-neutral-700">
                                                    主数据
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                                张三
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                                <div class="flex space-x-2">
                                                    <button class="text-primary hover:text-primary/80">
                                                        <i class="fa fa-edit"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-neutral-700">
                                                        <i class="fa fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                                账户
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                                客户在银行开设的各类账户
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-secondary/10 text-secondary">
                                                    核心银行
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-neutral-100 text-neutral-700">
                                                    交易数据
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                                李四
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                                <div class="flex space-x-2">
                                                    <button class="text-primary hover:text-primary/80">
                                                        <i class="fa fa-edit"></i>
                                                    </button>
                                                    <button class="text-neutral-500 hover:text-neutral-700">
                                                        <i class="fa fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 应用架构内容 (默认隐藏) -->
                    <div id="application-architecture-content" class="arch-content hidden">
                        <!-- 应用架构现状/目标显示区域 -->
                        <div id="application-arch-mode-display" class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="text-lg font-semibold text-neutral-700" id="application-arch-title">应用架构 - 现状</h3>
                                <span class="text-sm px-3 py-1 bg-warning/10 text-warning rounded-full" id="application-arch-status">重构中</span>
                            </div>
                            <p class="text-neutral-600 mb-3" id="application-arch-description">
                                当前应用架构混合了单体应用和微服务，服务间通信复杂，耦合度高
                            </p>
                            
                            <!-- 进度指示器 -->
                            <div class="mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-neutral-500">架构转型进度</span>
                                    <span class="font-medium text-primary">50%</span>
                                </div>
                                <div class="progress-indicator">
                                    <div class="progress-bar bg-primary" style="width: 50%">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 特点列表 -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-2">主要特点</h4>
                                    <ul class="space-y-1 text-sm" id="application-arch-highlights">
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>应用边界不清晰</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>服务治理能力不足</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-circle-o text-neutral-400 mt-1 mr-2 text-xs"></i>
                                            <span>部署和扩展困难</span>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-2">改进重点</h4>
                                    <ul class="space-y-1 text-sm">
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>建立微服务治理平台</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>实施服务网格架构</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-check text-success mt-1 mr-2 text-xs"></i>
                                            <span>构建容器化部署体系</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 应用架构横向导航 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-secondary text-white text-sm transition-all-300">
                                    应用架构蓝图
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    系统清单
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    移动应用清单
                                </button>
                            </div>
                        </div>

                        <!-- 应用架构蓝图内容 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">应用架构蓝图</h3>
                                <div class="flex space-x-2">
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-expand mr-1"></i> 全屏
                                    </button>
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-download mr-1"></i> 导出
                                    </button>
                                </div>
                            </div>

                            <div class="bg-neutral-50 rounded-lg p-4 h-[500px] overflow-auto">
                                <!-- 应用架构图 -->
                                <div class="relative min-w-[800px] min-h-[450px]">
                                    <!-- 客户端层 -->
                                    <div class="absolute top-0 left-0 w-full flex justify-around mb-4">
                                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 w-[180px] text-center shadow-sm">
                                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                                                <i class="fa fa-desktop text-blue-600"></i>
                                            </div>
                                            <p class="text-sm font-medium text-blue-800">网上银行系统</p>
                                        </div>
                                        <div class="bg-green-50 border border-green-200 rounded-lg p-3 w-[180px] text-center shadow-sm">
                                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-2">
                                                <i class="fa fa-mobile text-green-600"></i>
                                            </div>
                                            <p class="text-sm font-medium text-green-800">手机银行系统</p>
                                        </div>
                                        <div class="bg-purple-50 border border-purple-200 rounded-lg p-3 w-[180px] text-center shadow-sm">
                                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-2">
                                                <i class="fa fa-tablet text-purple-600"></i>
                                            </div>
                                            <p class="text-sm font-medium text-purple-800">平板应用</p>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 客户端到渠道层 -->
                                    <div class="absolute top-[70px] left-0 w-full flex justify-around">
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                    </div>

                                    <!-- 渠道层 -->
                                    <div class="absolute top-[110px] left-0 w-full">
                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-center shadow-sm mx-auto w-[600px]">
                                            <p class="text-sm font-medium text-gray-800 mb-2">渠道整合平台</p>
                                            <div class="grid grid-cols-2 gap-2 text-xs">
                                                <div class="bg-white border border-gray-100 rounded p-1">API网关</div>
                                                <div class="bg-white border border-gray-100 rounded p-1">负载均衡</div>
                                                <div class="bg-white border border-gray-100 rounded p-1">安全认证</div>
                                                <div class="bg-white border border-gray-100 rounded p-1">会话管理</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 渠道层到核心层 -->
                                    <div class="absolute top-[190px] left-0 w-full">
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                    </div>

                                    <!-- 核心业务层 -->
                                    <div class="absolute top-[230px] left-0 w-full">
                                        <div class="flex justify-center space-x-3">
                                            <div class="bg-red-50 border border-red-200 rounded-lg p-3 w-[160px] text-center shadow-sm">
                                                <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-credit-card text-red-600 text-sm"></i>
                                                </div>
                                                <p class="text-xs font-medium text-red-800">核心银行系统</p>
                                            </div>
                                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 w-[160px] text-center shadow-sm">
                                                <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-exchange text-yellow-600 text-sm"></i>
                                                </div>
                                                <p class="text-xs font-medium text-yellow-800">支付清算系统</p>
                                            </div>
                                            <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-3 w-[160px] text-center shadow-sm">
                                                <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-shield text-indigo-600 text-sm"></i>
                                                </div>
                                                <p class="text-xs font-medium text-indigo-800">风险管理系统</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 核心层到数据层 -->
                                    <div class="absolute top-[310px] left-0 w-full flex justify-around">
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                        <div class="h-[40px] w-[1px] bg-gray-300 mx-auto"></div>
                                    </div>

                                    <!-- 数据层 -->
                                    <div class="absolute top-[350px] left-0 w-full">
                                        <div class="flex justify-center space-x-3">
                                            <div class="bg-cyan-50 border border-cyan-200 rounded-lg p-3 w-[160px] text-center shadow-sm">
                                                <div class="w-8 h-8 rounded-full bg-cyan-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-database text-cyan-600 text-sm"></i>
                                                </div>
                                                <p class="text-xs font-medium text-cyan-800">业务数据库</p>
                                            </div>
                                            <div class="bg-orange-50 border border-orange-200 rounded-lg p-3 w-[160px] text-center shadow-sm">
                                                <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-database text-orange-600 text-sm"></i>
                                                </div>
                                                <p class="text-xs font-medium text-orange-800">数据仓库</p>
                                            </div>
                                            <div class="bg-pink-50 border border-pink-200 rounded-lg p-3 w-[160px] text-center shadow-sm">
                                                <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-file-text-o text-pink-600 text-sm"></i>
                                                </div>
                                                <p class="text-xs font-medium text-pink-800">文件存储</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 技术架构内容 (默认隐藏) -->
                    <div id="technology-architecture-content" class="arch-content hidden">
                        <!-- 技术架构现状/目标显示区域 -->
                        <div id="technology-arch-mode-display" class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <h3 class="text-lg font-semibold text-neutral-700">技术架构状态</h3>
                                    <div class="flex items-center mt-1">
                                        <span id="technology-arch-status-badge" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            现状
                                        </span>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p id="technology-arch-status-desc" class="text-sm text-neutral-600">
                                        当前技术架构主要基于传统单体应用架构，面临扩展性不足、部署效率低等挑战
                                    </p>
                                </div>
                            </div>
                            
                            <!-- 进度指示器 -->
                            <div class="mb-4">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm font-medium text-neutral-700">现代化转型进度</span>
                                    <span id="technology-arch-progress-text" class="text-sm font-medium text-blue-600">35%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div id="technology-arch-progress-bar" class="bg-blue-600 h-2 rounded-full" style="width: 35%"></div>
                                </div>
                            </div>
                            
                            <!-- 主要特点 -->
                            <div class="mb-4">
                                <h4 class="text-sm font-semibold text-neutral-700 mb-2">主要特点</h4>
                                <ul id="technology-arch-features" class="text-sm text-neutral-600 space-y-1">
                                    <li class="flex items-start">
                                        <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                                        <span>核心业务系统稳定运行，支持现有业务需求</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                                        <span>单体应用架构，代码耦合度高，维护成本大</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                                        <span>自动化部署能力不足，影响开发效率</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                                        <span>技术栈分散，缺乏统一的技术治理规范</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <!-- 改进重点 -->
                            <div>
                                <h4 class="text-sm font-semibold text-neutral-700 mb-2">改进重点</h4>
                                <ul id="technology-arch-improvements" class="text-sm text-neutral-600 space-y-1">
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>推进微服务架构转型，提高系统弹性和可扩展性</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>建立DevOps流程，实现自动化部署和持续集成</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>制定统一的技术栈标准，加强技术治理</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>引入容器化技术，提高资源利用率</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <!-- 技术架构横向导航 -->
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-2">
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-secondary text-white text-sm transition-all-300">
                                    技术架构蓝图
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    技术组件基线
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    性能容量基线
                                </button>
                                <button class="whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300">
                                    高可用基线
                                </button>
                            </div>
                        </div>

                        <!-- 技术架构蓝图内容 -->
                        <div id="tech-blueprint-content" class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">技术架构蓝图</h3>
                            </div>

                            <!-- 架构层次说明 -->
                            <div class="bg-primary-50 rounded-lg p-4 mb-4 border border-primary-100">
                                <div class="flex items-start">
                                    <i class="fa fa-info-circle text-primary mt-0.5 mr-2"></i>
                                    <p class="text-sm text-neutral-700">技术架构采用分层设计，从上至下包括：前端应用层、后端服务层、平台中间件层、数据存储层、基础设施层。每层通过标准化接口进行交互，确保系统的高内聚低耦合。</p>
                                </div>
                            </div>

                            <!-- 交互式技术架构图 -->
                            <div class="bg-neutral-50 rounded-lg p-4 h-[500px] relative overflow-hidden">
                                <!-- 分层技术架构图 -->
                                <div class="absolute inset-0 overflow-auto p-4">
                                    <!-- 前端应用层 -->
                                    <div class="mb-8">
                                        <h4 class="flex items-center text-neutral-700 font-medium mb-4">
                                            <i class="fa fa-desktop text-primary mr-2"></i>
                                            前端应用层
                                        </h4>
                                        <div class="flex flex-wrap justify-center gap-3">
                                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 w-[200px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="frontend">
                                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-desktop text-blue-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-blue-800">Web应用</p>
                                                <p class="text-xs text-blue-600 mt-1">响应式UI，浏览器兼容</p>
                                            </div>
                                            <div class="bg-green-50 border border-green-200 rounded-lg p-3 w-[200px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="mobile">
                                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-mobile text-green-600 text-xl"></i>
                                                </div>
                                                <p class="text-sm font-medium text-green-800">移动应用</p>
                                                <p class="text-xs text-green-600 mt-1">跨平台原生体验</p>
                                            </div>
                                            <div class="bg-purple-50 border border-purple-200 rounded-lg p-3 w-[200px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="h5">
                                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-globe text-purple-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-purple-800">H5应用</p>
                                                <p class="text-xs text-purple-600 mt-1">轻量级跨设备访问</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 前端到后端 -->
                                    <div class="flex justify-center mb-8">
                                        <svg width="40" height="40" viewBox="0 0 40 40">
                                            <path d="M20 10 L20 30" stroke="#d1d5db" stroke-width="2" stroke-dasharray="5,5"/>
                                            <path d="M17 27 L20 30 L23 27" fill="none" stroke="#d1d5db" stroke-width="2"/>
                                        </svg>
                                    </div>

                                    <!-- 后端服务层 -->
                                    <div class="mb-8">
                                        <h4 class="flex items-center text-neutral-700 font-medium mb-4">
                                            <i class="fa fa-server text-primary mr-2"></i>
                                            后端服务层
                                        </h4>
                                        <div class="flex flex-wrap justify-center gap-3">
                                            <div class="bg-orange-50 border border-orange-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="api">
                                                <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-plug text-orange-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-orange-800">API网关</p>
                                                <p class="text-xs text-orange-600 mt-1">请求路由，负载均衡</p>
                                            </div>
                                            <div class="bg-red-50 border border-red-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="business">
                                                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-cogs text-red-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-red-800">业务服务</p>
                                                <p class="text-xs text-red-600 mt-1">核心业务逻辑处理</p>
                                            </div>
                                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="integration">
                                                <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-exchange text-yellow-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-yellow-800">集成服务</p>
                                                <p class="text-xs text-yellow-600 mt-1">外部系统对接</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 后端到平台 -->
                                    <div class="flex justify-center mb-8">
                                        <svg width="40" height="40" viewBox="0 0 40 40">
                                            <path d="M20 10 L20 30" stroke="#d1d5db" stroke-width="2" stroke-dasharray="5,5"/>
                                            <path d="M17 27 L20 30 L23 27" fill="none" stroke="#d1d5db" stroke-width="2"/>
                                        </svg>
                                    </div>

                                    <!-- 平台中间件层 -->
                                    <div class="mb-8">
                                        <h4 class="flex items-center text-neutral-700 font-medium mb-4">
                                            <i class="fa fa-cubes text-primary mr-2"></i>
                                            平台中间件层
                                        </h4>
                                        <div class="flex flex-wrap justify-center gap-3">
                                            <div class="bg-teal-50 border border-teal-200 rounded-lg p-3 w-[150px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="mq">
                                                <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-comment text-teal-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-teal-800">消息队列</p>
                                                <p class="text-xs text-teal-600 mt-1">异步通信</p>
                                            </div>
                                            <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-3 w-[150px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="cache">
                                                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-database text-indigo-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-indigo-800">缓存系统</p>
                                                <p class="text-xs text-indigo-600 mt-1">数据加速</p>
                                            </div>
                                            <div class="bg-pink-50 border border-pink-200 rounded-lg p-3 w-[150px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="search">
                                                <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-search text-pink-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-pink-800">搜索引擎</p>
                                                <p class="text-xs text-pink-600 mt-1">全文检索</p>
                                            </div>
                                            <div class="bg-purple-50 border border-purple-200 rounded-lg p-3 w-[150px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="workflow">
                                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-sitemap text-purple-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-purple-800">工作流引擎</p>
                                                <p class="text-xs text-purple-600 mt-1">流程自动化</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 平台到数据 -->
                                    <div class="flex justify-center mb-8">
                                        <svg width="40" height="40" viewBox="0 0 40 40">
                                            <path d="M20 10 L20 30" stroke="#d1d5db" stroke-width="2" stroke-dasharray="5,5"/>
                                            <path d="M17 27 L20 30 L23 27" fill="none" stroke="#d1d5db" stroke-width="2"/>
                                        </svg>
                                    </div>

                                    <!-- 数据存储层 -->
                                    <div class="mb-8">
                                        <h4 class="flex items-center text-neutral-700 font-medium mb-4">
                                            <i class="fa fa-database text-primary mr-2"></i>
                                            数据存储层
                                        </h4>
                                        <div class="flex flex-wrap justify-center gap-3">
                                            <div class="bg-cyan-50 border border-cyan-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="db">
                                                <div class="w-10 h-10 rounded-full bg-cyan-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-database text-cyan-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-cyan-800">关系型数据库</p>
                                                <p class="text-xs text-cyan-600 mt-1">结构化数据存储</p>
                                            </div>
                                            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="nosql">
                                                <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-table text-amber-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-amber-800">NoSQL数据库</p>
                                                <p class="text-xs text-amber-600 mt-1">非结构化数据存储</p>
                                            </div>
                                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="dw">
                                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-database text-blue-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-blue-800">数据仓库</p>
                                                <p class="text-xs text-blue-600 mt-1">数据分析与报表</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 连接线 - 数据到基础设施 -->
                                    <div class="flex justify-center mb-8">
                                        <svg width="40" height="40" viewBox="0 0 40 40">
                                            <path d="M20 10 L20 30" stroke="#d1d5db" stroke-width="2" stroke-dasharray="5,5"/>
                                            <path d="M17 27 L20 30 L23 27" fill="none" stroke="#d1d5db" stroke-width="2"/>
                                        </svg>
                                    </div>

                                    <!-- 基础设施层 -->
                                    <div class="mb-4">
                                        <h4 class="flex items-center text-neutral-700 font-medium mb-4">
                                            <i class="fa fa-server text-primary mr-2"></i>
                                            基础设施层
                                        </h4>
                                        <div class="flex flex-wrap justify-center gap-3">
                                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="iaas">
                                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-server text-gray-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-gray-800">IaaS平台</p>
                                                <p class="text-xs text-gray-600 mt-1">计算、网络、存储资源</p>
                                            </div>
                                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="container">
                                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-cubes text-gray-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-gray-800">容器平台</p>
                                                <p class="text-xs text-gray-600 mt-1">Docker + Kubernetes</p>
                                            </div>
                                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 w-[180px] text-center shadow-sm hover:shadow-md transition-shadow cursor-pointer tech-layer-item" data-layer="security">
                                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                                    <i class="fa fa-shield text-gray-600"></i>
                                                </div>
                                                <p class="text-sm font-medium text-gray-800">安全防护</p>
                                                <p class="text-xs text-gray-600 mt-1">认证、授权、加密</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 架构说明面板 (默认隐藏) -->
                                <div id="tech-layer-detail" class="absolute top-0 left-0 w-full h-full bg-white p-6 shadow-lg z-10 hidden">
                                    <div class="flex justify-between items-center mb-4">
                                        <h4 class="text-lg font-medium text-neutral-800" id="tech-detail-title">架构层详情</h4>
                                        <button id="tech-detail-close" class="text-neutral-500 hover:text-neutral-700">
                                            <i class="fa fa-times text-xl"></i>
                                        </button>
                                    </div>
                                    <div id="tech-detail-content" class="text-sm text-neutral-600 space-y-3">
                                        <!-- 详情内容将通过JavaScript动态填充 -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 技术组件基线内容 -->
                        <div id="tech-components-content" class="bg-white rounded-lg shadow-card p-4 mb-6 hidden">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">技术组件基线</h3>
                                <div class="flex space-x-2">
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-filter mr-1"></i> 筛选
                                    </button>
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-download mr-1"></i> 导出
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- 前端技术组件 -->
                                <div class="border border-neutral-200 rounded-lg p-4">
                                    <h4 class="flex items-center text-base font-medium text-neutral-700 mb-3">
                                        <i class="fa fa-desktop text-primary mr-2"></i>
                                        前端技术组件
                                    </h4>
                                    <ul class="space-y-3">
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">React.js</div>
                                            <div class="text-xs text-neutral-600">用于构建用户界面的JavaScript库，支持组件化开发和虚拟DOM</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Vue.js</div>
                                            <div class="text-xs text-neutral-600">渐进式JavaScript框架，易于上手和集成</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Angular</div>
                                            <div class="text-xs text-neutral-600">完整的前端框架，提供依赖注入和双向数据绑定</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Tailwind CSS</div>
                                            <div class="text-xs text-neutral-600">实用优先的CSS框架，提供原子化CSS类</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">TypeScript</div>
                                            <div class="text-xs text-neutral-600">JavaScript的超集，添加了类型系统</div>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 后端技术组件 -->
                                <div class="border border-neutral-200 rounded-lg p-4">
                                    <h4 class="flex items-center text-base font-medium text-neutral-700 mb-3">
                                        <i class="fa fa-server text-primary mr-2"></i>
                                        后端技术组件
                                    </h4>
                                    <ul class="space-y-3">
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Spring Boot</div>
                                            <div class="text-xs text-neutral-600">Java后端开发框架，简化配置和开发流程</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Node.js</div>
                                            <div class="text-xs text-neutral-600">基于Chrome V8引擎的JavaScript运行时</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Django</div>
                                            <div class="text-xs text-neutral-600">Python高级Web框架，提供完整的解决方案</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Flask</div>
                                            <div class="text-xs text-neutral-600">轻量级Python Web框架，灵活且可扩展</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">FastAPI</div>
                                            <div class="text-xs text-neutral-600">高性能Python Web框架，支持异步和类型提示</div>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 数据库技术组件 -->
                                <div class="border border-neutral-200 rounded-lg p-4">
                                    <h4 class="flex items-center text-base font-medium text-neutral-700 mb-3">
                                        <i class="fa fa-database text-primary mr-2"></i>
                                        数据库技术组件
                                    </h4>
                                    <ul class="space-y-3">
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">MySQL</div>
                                            <div class="text-xs text-neutral-600">开源关系型数据库，广泛应用于Web应用</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">PostgreSQL</div>
                                            <div class="text-xs text-neutral-600">功能丰富的开源对象关系型数据库</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">MongoDB</div>
                                            <div class="text-xs text-neutral-600">文档型NoSQL数据库，适合处理大量非结构化数据</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Redis</div>
                                            <div class="text-xs text-neutral-600">高性能内存数据库，用于缓存和消息队列</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Elasticsearch</div>
                                            <div class="text-xs text-neutral-600">分布式搜索和分析引擎，擅长全文检索</div>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 中间件技术组件 -->
                                <div class="border border-neutral-200 rounded-lg p-4">
                                    <h4 class="flex items-center text-base font-medium text-neutral-700 mb-3">
                                        <i class="fa fa-plug text-primary mr-2"></i>
                                        中间件技术组件
                                    </h4>
                                    <ul class="space-y-3">
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">RabbitMQ</div>
                                            <div class="text-xs text-neutral-600">开源消息代理，实现可靠的消息队列</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Kafka</div>
                                            <div class="text-xs text-neutral-600">分布式流处理平台，高吞吐量的消息队列</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Nginx</div>
                                            <div class="text-xs text-neutral-600">高性能Web服务器和反向代理服务器</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Apache</div>
                                            <div class="text-xs text-neutral-600">开源Web服务器软件</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Kong</div>
                                            <div class="text-xs text-neutral-600">开源API网关和服务网格</div>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 容器与编排技术组件 -->
                                <div class="border border-neutral-200 rounded-lg p-4">
                                    <h4 class="flex items-center text-base font-medium text-neutral-700 mb-3">
                                        <i class="fa fa-cubes text-primary mr-2"></i>
                                        容器与编排技术组件
                                    </h4>
                                    <ul class="space-y-3">
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Docker</div>
                                            <div class="text-xs text-neutral-600">开源容器化平台，简化应用部署</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Kubernetes</div>
                                            <div class="text-xs text-neutral-600">开源容器编排平台，自动化容器操作</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">OpenShift</div>
                                            <div class="text-xs text-neutral-600">企业级Kubernetes平台</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Helm</div>
                                            <div class="text-xs text-neutral-600">Kubernetes的包管理器</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Minikube</div>
                                            <div class="text-xs text-neutral-600">本地Kubernetes测试环境</div>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 开发工具技术组件 -->
                                <div class="border border-neutral-200 rounded-lg p-4">
                                    <h4 class="flex items-center text-base font-medium text-neutral-700 mb-3">
                                        <i class="fa fa-wrench text-primary mr-2"></i>
                                        开发工具技术组件
                                    </h4>
                                    <ul class="space-y-3">
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Git</div>
                                            <div class="text-xs text-neutral-600">分布式版本控制系统</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Jenkins</div>
                                            <div class="text-xs text-neutral-600">开源自动化服务器，用于CI/CD</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">GitHub Actions</div>
                                            <div class="text-xs text-neutral-600">GitHub的CI/CD平台</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Jira</div>
                                            <div class="text-xs text-neutral-600">项目管理和问题跟踪工具</div>
                                        </li>
                                        <li class="bg-neutral-50 p-3 rounded-md">
                                            <div class="font-medium text-sm text-neutral-800 mb-1">Confluence</div>
                                            <div class="text-xs text-neutral-600">团队协作和知识管理平台</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 性能容量基线内容 -->
                        <div id="performance-baseline-content" class="bg-white rounded-lg shadow-card p-4 mb-6 hidden">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">性能容量基线</h3>
                                <div class="flex space-x-2">
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-cog mr-1"></i> 配置
                                    </button>
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-download mr-1"></i> 导出
                                    </button>
                                </div>
                            </div>

                            <div class="bg-neutral-50 rounded-lg p-4 h-[500px] flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fa fa-tachometer text-5xl text-neutral-300 mb-4"></i>
                                    <p class="text-neutral-500">性能容量基线数据</p>
                                    <p class="text-sm text-neutral-400 mt-2">包含系统响应时间、吞吐量、资源利用率等性能指标</p>
                                </div>
                            </div>
                        </div>

                        <!-- 高可用基线内容 -->
                        <div id="high-availability-content" class="bg-white rounded-lg shadow-card p-4 mb-6 hidden">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">高可用基线</h3>
                                <div class="flex space-x-2">
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-shield mr-1"></i> 策略
                                    </button>
                                    <button class="text-sm text-neutral-600 hover:text-primary">
                                        <i class="fa fa-download mr-1"></i> 导出
                                    </button>
                                </div>
                            </div>

                            <div class="bg-neutral-50 rounded-lg p-4 h-[500px] flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fa fa-heartbeat text-5xl text-neutral-300 mb-4"></i>
                                    <p class="text-neutral-500">高可用基线配置</p>
                                    <p class="text-sm text-neutral-400 mt-2">包含冗余设计、故障转移、灾备方案等高可用策略</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 安全架构内容 (默认隐藏) -->
                    <div id="security-architecture-content" class="arch-content hidden">
                        <!-- 安全架构现状/目标显示区域 -->
                        <div id="security-arch-mode-display" class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-start mb-4">
                                <div>
                                    <h3 class="text-lg font-semibold text-neutral-700">安全架构状态</h3>
                                    <div class="flex items-center mt-1">
                                        <span id="security-arch-status-badge" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            现状
                                        </span>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p id="security-arch-status-desc" class="text-sm text-neutral-600">
                                        当前安全架构主要基于传统边界防护，面临零信任安全、云原生安全等新挑战
                                    </p>
                                </div>
                            </div>
                            
                            <!-- 进度指示器 -->
                            <div class="mb-4">
                                <div class="flex justify-between items-center mb-1">
                                    <span class="text-sm font-medium text-neutral-700">安全现代化进度</span>
                                    <span id="security-arch-progress-text" class="text-sm font-medium text-blue-600">55%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div id="security-arch-progress-bar" class="bg-blue-600 h-2 rounded-full" style="width: 55%"></div>
                                </div>
                            </div>
                            
                            <!-- 主要特点 -->
                            <div class="mb-4">
                                <h4 class="text-sm font-semibold text-neutral-700 mb-2">主要特点</h4>
                                <ul id="security-arch-features" class="text-sm text-neutral-600 space-y-1">
                                    <li class="flex items-start">
                                        <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                                        <span>基本网络安全防护措施已到位，包括防火墙、入侵检测等</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                                        <span>定期安全审计和漏洞扫描机制已建立</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                                        <span>缺乏零信任安全架构的全面实施</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-times-circle text-red-500 mt-0.5 mr-2"></i>
                                        <span>云原生安全防护能力不足，无法满足混合云环境需求</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <!-- 改进重点 -->
                            <div>
                                <h4 class="text-sm font-semibold text-neutral-700 mb-2">改进重点</h4>
                                <ul id="security-arch-improvements" class="text-sm text-neutral-600 space-y-1">
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>建立零信任安全架构，实现细粒度访问控制</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>增强云原生安全能力，覆盖容器安全、微服务安全等</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>提升安全自动化响应能力，建立安全运营中心</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fa fa-arrow-right text-blue-500 mt-0.5 mr-2"></i>
                                        <span>加强数据安全保护，实现全生命周期数据加密</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-card p-4 mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-neutral-700">安全架构概述</h3>
                                <button class="text-primary text-sm hover:underline">查看详情</button>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-3">安全域划分</h4>
                                    <ul class="space-y-2">
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">生产域</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">测试域</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">开发域</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">管理域</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">DMZ域</span>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h4 class="text-sm font-medium text-neutral-700 mb-3">安全能力</h4>
                                    <ul class="space-y-2">
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">身份认证与访问控制</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">数据加密与脱敏</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fa fa-check-circle text-success mr-2"></i>
                                            <span class="text-sm text-neutral-600">安全审计与监控</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 架构存量资产内容 (默认隐藏) -->
                    <div id="assets-architecture-content" class="arch-content hidden">
                        <!-- 资产统计卡片 -->
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm text-blue-700 font-medium">总体架构设计</span>
                                    <i class="fa fa-sitemap text-blue-500"></i>
                                </div>
                                <div class="text-2xl font-bold text-blue-800 mb-1">15</div>
                                <div class="text-xs text-blue-600">已发布 12 个</div>
                            </div>
                            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm text-green-700 font-medium">专题设计</span>
                                    <i class="fa fa-file-text text-green-500"></i>
                                </div>
                                <div class="text-2xl font-bold text-green-800 mb-1">32</div>
                                <div class="text-xs text-green-600">已发布 28 个</div>
                            </div>
                            <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm text-orange-700 font-medium">概设设计</span>
                                    <i class="fa fa-file-code-o text-orange-500"></i>
                                </div>
                                <div class="text-2xl font-bold text-orange-800 mb-1">48</div>
                                <div class="text-xs text-orange-600">已发布 40 个</div>
                            </div>
                            <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm text-purple-700 font-medium">详设设计</span>
                                    <i class="fa fa-file-text-o text-purple-500"></i>
                                </div>
                                <div class="text-2xl font-bold text-purple-800 mb-1">65</div>
                                <div class="text-xs text-purple-600">已发布 58 个</div>
                            </div>
                        </div>

                        <!-- 筛选和操作区 -->
                        <div class="bg-white rounded-lg shadow-card p-6 mb-6">
                            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0">
                                <div class="flex items-center space-x-4">
                                    <h3 class="text-lg font-semibold text-neutral-700 flex items-center">
                                        <i class="fa fa-archive text-primary mr-2"></i>
                                        架构设计资产库
                                    </h3>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <!-- 设计分类筛选 -->
                                    <select id="asset-category-filter" class="px-4 py-2 border border-neutral-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white">
                                        <option value="all">全部分类</option>
                                        <option value="overall">总体架构设计</option>
                                        <option value="special">专题设计</option>
                                        <option value="outline">概设设计</option>
                                        <option value="detailed">详设设计</option>
                                    </select>
                                    <!-- 状态筛选 -->
                                    <select id="asset-status-filter" class="px-4 py-2 border border-neutral-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white">
                                        <option value="all">全部状态</option>
                                        <option value="published">已发布</option>
                                        <option value="unpublished">未发布</option>
                                    </select>
                                    <!-- 创建按钮 -->
                                    <button onclick="openCreateAssetModal()" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-md text-sm font-medium transition-all shadow-md hover:shadow-lg flex items-center">
                                        <i class="fa fa-plus-circle mr-2"></i>
                                        创建资产
                                    </button>
                                </div>
                            </div>

                            <!-- 资产列表表格 -->
                            <div class="overflow-x-auto">
                                <table class="w-full" id="assets-table">
                                    <thead class="bg-gradient-to-r from-neutral-100 to-neutral-50">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">资产编号</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">资产名称</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">设计分类</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">所属系统</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">负责人</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">创建日期</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <!-- 总体架构设计 -->
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="overall" data-status="published">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">ARCH-2025-001</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">互联网核心业务系统总体架构</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    <i class="fa fa-sitemap mr-1"></i>总体架构
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">核心业务系统</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">张三</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-10</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    已发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-600 hover:text-neutral-800">下载</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="overall" data-status="unpublished">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">ARCH-2025-002</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">数据中台总体架构设计</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    <i class="fa fa-sitemap mr-1"></i>总体架构
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">数据中台</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">李四</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-12</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    未发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-green-600 hover:text-green-700">发布</button>
                                            </td>
                                        </tr>
                                        <!-- 专题设计 -->
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="special" data-status="published">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">SPEC-2025-001</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">微服务治理专题设计</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fa fa-file-text mr-1"></i>专题设计
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">核心业务系统</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">王五</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-08</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    已发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-600 hover:text-neutral-800">下载</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="special" data-status="published">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">SPEC-2025-002</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">数据安全与隐私保护专题</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fa fa-file-text mr-1"></i>专题设计
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">数据中台</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">赵六</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-09</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    已发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-600 hover:text-neutral-800">下载</button>
                                            </td>
                                        </tr>
                                        <!-- 概设设计 -->
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="outline" data-status="published">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">OUTL-2025-001</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">用户管理模块概设</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                    <i class="fa fa-file-code-o mr-1"></i>概设设计
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">核心业务系统</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">孙七</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-11</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    已发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-600 hover:text-neutral-800">下载</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="outline" data-status="unpublished">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">OUTL-2025-002</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">订单处理模块概设</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                    <i class="fa fa-file-code-o mr-1"></i>概设设计
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">核心业务系统</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">吴九</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-13</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    未发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-green-600 hover:text-green-700">发布</button>
                                            </td>
                                        </tr>
                                        <!-- 详设设计 -->
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="detailed" data-status="published">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">DETL-2025-001</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">用户登录接口详设</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                    <i class="fa fa-file-text-o mr-1"></i>详设设计
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">核心业务系统</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">郑十</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-14</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    已发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-600 hover:text-neutral-800">下载</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors asset-row" data-category="detailed" data-status="unpublished">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">DETL-2025-002</td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">支付接口详设</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                    <i class="fa fa-file-text-o mr-1"></i>详设设计
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">核心业务系统</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">张三</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-15</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    未发布
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-green-600 hover:text-green-700">发布</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-neutral-200">
                                <div class="text-sm text-neutral-600">
                                    显示 1-8 条，共 160 条
                                </div>
                                <div class="flex space-x-2">
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">上一页</button>
                                    <button class="px-3 py-1 text-sm bg-primary text-white rounded-md">1</button>
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">2</button>
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">3</button>
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 架构评审与治理内容 (默认隐藏) -->
                    <div id="governance-architecture-content" class="arch-content hidden">
                        <!-- 评审清单展示区域 -->
                        <div class="bg-white rounded-lg shadow-card p-6 mb-6">
                            <div class="flex justify-between items-center mb-6">
                                <h3 class="text-lg font-semibold text-neutral-700 flex items-center">
                                    <i class="fa fa-list-alt text-primary mr-2"></i>
                                    评审清单
                                </h3>
                                <button onclick="openApplicationModal()" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-md text-sm font-medium transition-all shadow-md hover:shadow-lg flex items-center">
                                    <i class="fa fa-plus-circle mr-2"></i>
                                    创建申请
                                </button>
                            </div>

                            <!-- 评审类型统计 -->
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm text-blue-700 font-medium">新建系统申请</span>
                                        <i class="fa fa-desktop text-blue-500"></i>
                                    </div>
                                    <div class="text-2xl font-bold text-blue-800 mb-1">12</div>
                                    <div class="text-xs text-blue-600">待审批 3 个</div>
                                </div>
                                <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm text-green-700 font-medium">架构评审申请</span>
                                        <i class="fa fa-sitemap text-green-500"></i>
                                    </div>
                                    <div class="text-2xl font-bold text-green-800 mb-1">28</div>
                                    <div class="text-xs text-green-600">待审批 5 个</div>
                                </div>
                                <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm text-orange-700 font-medium">架构仲裁申请</span>
                                        <i class="fa fa-balance-scale text-orange-500"></i>
                                    </div>
                                    <div class="text-2xl font-bold text-orange-800 mb-1">5</div>
                                    <div class="text-xs text-orange-600">待审批 2 个</div>
                                </div>
                                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm text-purple-700 font-medium">联席评审申请</span>
                                        <i class="fa fa-users text-purple-500"></i>
                                    </div>
                                    <div class="text-2xl font-bold text-purple-800 mb-1">8</div>
                                    <div class="text-xs text-purple-600">待审批 1 个</div>
                                </div>
                            </div>

                            <!-- 评审清单表格 -->
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead class="bg-gradient-to-r from-neutral-100 to-neutral-50">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">申请编号</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">申请类型</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">申请标题</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">申请人</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">申请时间</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">状态</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-700 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">REV-2025-001</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    <i class="fa fa-desktop mr-1"></i>新建系统
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">核心业务系统新建申请</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">张三</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-15</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    待审批
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-green-600 hover:text-green-700">审批</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">REV-2025-002</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fa fa-sitemap mr-1"></i>架构评审
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">微服务架构改造方案评审</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">李四</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-14</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    已通过
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-400">审批</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">REV-2025-003</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                    <i class="fa fa-balance-scale mr-1"></i>架构仲裁
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">数据库选型仲裁申请</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">王五</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-13</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    评审中
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-green-600 hover:text-green-700">审批</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">REV-2025-004</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                    <i class="fa fa-users mr-1"></i>联席评审
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">重大系统上线联席评审</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">赵六</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-12</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                    待审批
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-green-600 hover:text-green-700">审批</button>
                                            </td>
                                        </tr>
                                        <tr class="hover:bg-neutral-50 transition-colors">
                                            <td class="px-4 py-3 text-sm text-neutral-900 font-medium">REV-2025-005</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    <i class="fa fa-sitemap mr-1"></i>架构评审
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm text-neutral-900">云原生架构转型评审</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">孙七</td>
                                            <td class="px-4 py-3 text-sm text-neutral-600">2025-01-11</td>
                                            <td class="px-4 py-3 text-sm">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                    已驳回
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 text-sm">
                                                <button class="text-primary hover:text-blue-700 mr-3">查看</button>
                                                <button class="text-neutral-400">审批</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 分页 -->
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-neutral-200">
                                <div class="text-sm text-neutral-600">
                                    显示 1-5 条，共 53 条
                                </div>
                                <div class="flex space-x-2">
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">上一页</button>
                                    <button class="px-3 py-1 text-sm bg-primary text-white rounded-md">1</button>
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">2</button>
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">3</button>
                                    <button class="px-3 py-1 text-sm border border-neutral-300 rounded-md hover:bg-neutral-50">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 申请类型选择弹窗 -->
    <div id="applicationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-4 flex justify-between items-center rounded-t-lg">
                <h3 class="text-xl font-semibold flex items-center">
                    <i class="fa fa-plus-circle mr-2"></i>
                    选择申请类型
                </h3>
                <button onclick="closeApplicationModal()" class="text-white hover:text-neutral-200 transition-colors">
                    <i class="fa fa-times text-2xl"></i>
                </button>
            </div>
            
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- 新建系统申请 -->
                    <div onclick="openApplicationForm('new-system')" class="cursor-pointer bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 border-2 border-blue-200 hover:border-blue-400 rounded-lg p-6 transition-all transform hover:scale-105 shadow-md hover:shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-desktop text-white text-xl"></i>
                            </div>
                            <h4 class="text-lg font-semibold text-blue-900">新建系统申请</h4>
                        </div>
                        <p class="text-sm text-blue-700">申请新建一个业务系统，需要填写系统名称、业务描述、预期上线时间等信息</p>
                    </div>

                    <!-- 架构评审申请 -->
                    <div onclick="openApplicationForm('arch-review')" class="cursor-pointer bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 border-2 border-green-200 hover:border-green-400 rounded-lg p-6 transition-all transform hover:scale-105 shadow-md hover:shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-sitemap text-white text-xl"></i>
                            </div>
                            <h4 class="text-lg font-semibold text-green-900">架构评审申请</h4>
                        </div>
                        <p class="text-sm text-green-700">申请架构设计方案评审，需提交架构设计文档、技术选型说明等材料</p>
                    </div>

                    <!-- 架构仲裁申请 -->
                    <div onclick="openApplicationForm('arch-arbitration')" class="cursor-pointer bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 border-2 border-orange-200 hover:border-orange-400 rounded-lg p-6 transition-all transform hover:scale-105 shadow-md hover:shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-balance-scale text-white text-xl"></i>
                            </div>
                            <h4 class="text-lg font-semibold text-orange-900">架构仲裁申请</h4>
                        </div>
                        <p class="text-sm text-orange-700">针对架构设计争议申请仲裁，需提供多个方案对比和争议点说明</p>
                    </div>

                    <!-- 联席评审申请 -->
                    <div onclick="openApplicationForm('joint-review')" class="cursor-pointer bg-gradient-to-br from-purple-50 to-purple-100 hover:from-purple-100 hover:to-purple-200 border-2 border-purple-200 hover:border-purple-400 rounded-lg p-6 transition-all transform hover:scale-105 shadow-md hover:shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-users text-white text-xl"></i>
                            </div>
                            <h4 class="text-lg font-semibold text-purple-900">联席评审申请</h4>
                        </div>
                        <p class="text-sm text-purple-700">申请跨部门联席评审，适用于重大项目和影响范围广的技术决策</p>
                    </div>

                    <!-- 技术调研申请 -->
                    <div onclick="openApplicationForm('tech-research')" class="cursor-pointer bg-gradient-to-br from-indigo-50 to-indigo-100 hover:from-indigo-100 hover:to-indigo-200 border-2 border-indigo-200 hover:border-indigo-400 rounded-lg p-6 transition-all transform hover:scale-105 shadow-md hover:shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-search text-white text-xl"></i>
                            </div>
                            <h4 class="text-lg font-semibold text-indigo-900">技术调研申请</h4>
                        </div>
                        <p class="text-sm text-indigo-700">申请新技术调研项目，需说明调研目的、预期成果等</p>
                    </div>

                    <!-- 技术框架引入申请 -->
                    <div onclick="openApplicationForm('framework-intro')" class="cursor-pointer bg-gradient-to-br from-teal-50 to-teal-100 hover:from-teal-100 hover:to-teal-200 border-2 border-teal-200 hover:border-teal-400 rounded-lg p-6 transition-all transform hover:scale-105 shadow-md hover:shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mr-3">
                                <i class="fa fa-code text-white text-xl"></i>
                            </div>
                            <h4 class="text-lg font-semibold text-teal-900">技术框架引入</h4>
                        </div>
                        <p class="text-sm text-teal-700">申请引入新的技术框架或组件，需提供技术对比和引入理由</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 全局图表实例对象，用于存储和管理图表实例
            window.chartInstances = window.chartInstances || {};
            
            // 销毁指定ID的图表实例
            function destroyChart(chartId) {
                if (window.chartInstances[chartId]) {
                    window.chartInstances[chartId].destroy();
                    delete window.chartInstances[chartId];
                }
            }

            // 移动端菜单切换
            const menuToggle = document.createElement('button');
            menuToggle.className = 'fixed bottom-4 right-4 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center md:hidden z-50';
            menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
            document.body.appendChild(menuToggle);

            menuToggle.addEventListener('click', function() {
                const aside = document.querySelector('aside');
                aside.classList.toggle('-translate-x-full');
                if (aside.classList.contains('-translate-x-full')) {
                    menuToggle.innerHTML = '<i class="fa fa-bars text-xl"></i>';
                } else {
                    menuToggle.innerHTML = '<i class="fa fa-times text-xl"></i>';
                }
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({ 
                            top: targetElement.offsetTop - 80, 
                            behavior: 'smooth' 
                        });
                    }
                });
            });

            // 架构管理二级菜单切换功能
            const archButtons = {
                'arch-business-btn': 'business-architecture-content',
                'arch-data-btn': 'data-architecture-content',
                'arch-app-btn': 'application-architecture-content',
                'arch-tech-btn': 'technology-architecture-content',
                'arch-security-btn': 'security-architecture-content',
                'arch-assets-btn': 'assets-architecture-content',
                'arch-governance-btn': 'governance-architecture-content'
            };

            // 当前选中的架构和模式
            let currentArch = 'business';
            let currentMode = 'current'; // current表示现状，target表示目标

            // 架构现状和目标数据
            const archData = {
                business: {
                    current: {
                        title: '业务架构 - 现状',
                        description: '当前业务架构以传统部门为中心，存在信息孤岛和流程冗余',
                        highlights: ['部门协作效率低', '业务流程分散', '数据不共享'],
                        status: '优化中'
                    },
                    target: {
                        title: '业务架构 - 目标',
                        description: '目标业务架构采用模块化设计，实现业务流程自动化和数据共享',
                        highlights: ['端到端流程整合', '业务能力复用', '数据驱动决策'],
                        status: '规划中'
                    }
                },
                data: {
                    current: {
                        title: '数据架构 - 现状',
                        description: '当前数据架构采用分散存储方式，数据质量和一致性难以保证',
                        highlights: ['数据孤岛现象严重', '缺乏统一数据标准', '数据治理体系不完善'],
                        status: '改进中'
                    },
                    target: {
                        title: '数据架构 - 目标',
                        description: '目标数据架构实现数据湖和数据仓库一体化，建立完善的数据治理体系',
                        highlights: ['统一数据标准', '实时数据处理', '数据质量保障'],
                        status: '设计中'
                    }
                },
                app: {
                    current: {
                        title: '应用架构 - 现状',
                        description: '当前应用架构以单体应用为主，耦合度高，难以快速响应业务需求',
                        highlights: ['系统间集成复杂', '部署维护困难', '扩展性不足'],
                        status: '转型中'
                    },
                    target: {
                        title: '应用架构 - 目标',
                        description: '目标应用架构采用微服务架构，实现松耦合、高可用、易扩展的系统设计',
                        highlights: ['服务化拆分', '容器化部署', '自动化运维'],
                        status: '实施中'
                    }
                },
                tech: {
                    current: {
                        title: '技术架构 - 现状',
                        description: '当前技术架构采用混合技术栈，存在技术债务和维护挑战',
                        highlights: ['技术选型不统一', '基础设施老旧', '安全防护不足'],
                        status: '升级中'
                    },
                    target: {
                        title: '技术架构 - 目标',
                        description: '目标技术架构采用云原生技术栈，实现弹性、安全、高效的技术平台',
                        highlights: ['云原生转型', 'DevOps实践', '智能运维'],
                        status: '规划中'
                    }
                },
                security: {
                    current: {
                        title: '安全架构 - 现状',
                        description: '当前安全架构以被动防护为主，缺乏全面的安全管理体系',
                        highlights: ['安全策略不完善', '监控能力不足', '应急响应机制缺失'],
                        status: '强化中'
                    },
                    target: {
                        title: '安全架构 - 目标',
                        description: '目标安全架构实现纵深防御和主动安全，建立完整的安全保障体系',
                        highlights: ['零信任架构', '威胁情报分析', '自动化安全运营'],
                        status: '设计中'
                    }
                }
            };

            // 显示架构模式下拉菜单
            const archButtonsElements = document.querySelectorAll('[id^="arch-"][id$="-btn"]');
            archButtonsElements.forEach(button => {
                button.addEventListener('click', function(e) {
                    // 阻止事件冒泡，避免触发架构切换
                    if (e.target.closest('.arch-mode-btn')) return;
                    
                    const archType = this.id.replace('arch-', '').replace('-btn', '');
                    
                    // 隐藏所有下拉菜单
                    document.querySelectorAll('.arch-mode-dropdown').forEach(dropdown => {
                        dropdown.classList.add('hidden');
                    });
                    
                    // 显示当前按钮的下拉菜单
                    const dropdownId = archType + '-mode-dropdown';
                    const dropdown = document.getElementById(dropdownId);
                    if (dropdown) {
                        dropdown.classList.toggle('hidden');
                    }
                });
            });

            // 点击页面其他地方关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.relative.inline-block')) {
                    document.querySelectorAll('.arch-mode-dropdown').forEach(dropdown => {
                        dropdown.classList.add('hidden');
                    });
                }
            });

            // 架构模式切换按钮事件
            const modeButtons = document.querySelectorAll('.arch-mode-btn');
            modeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止冒泡
                    
                    const archType = this.getAttribute('data-arch');
                    const mode = this.getAttribute('data-mode');
                    
                    // 更新当前选中的架构和模式
                    currentArch = archType;
                    currentMode = mode;
                    
                    // 切换按钮样式
                    const dropdownId = archType + '-mode-dropdown';
                    const dropdown = document.getElementById(dropdownId);
                    if (dropdown) {
                        const buttons = dropdown.querySelectorAll('.arch-mode-btn');
                        buttons.forEach(btn => {
                            btn.className = 'px-2 py-1 text-xs text-neutral-700 hover:bg-neutral-100 rounded-md arch-mode-btn';
                        });
                        this.className = 'px-2 py-1 text-xs bg-primary text-white rounded-md arch-mode-btn';
                    }
                    
                    // 关闭下拉菜单
                    dropdown.classList.add('hidden');
                    
                    // 更新架构内容显示
                    updateArchContent(archType, mode);
                });
            });

            // 更新架构内容显示
            function updateArchContent(archType, mode) {
                // 这里可以根据不同的架构类型和模式更新内容
                console.log(`更新${archType}架构的${mode === 'current' ? '现状' : '目标'}内容`);
                
                // 实际项目中可以根据archData中的数据动态更新内容
                const data = archData[archType]?.[mode];
                if (data) {
                    // 在实际项目中，这里可以更新相应的DOM元素
                    console.log('架构数据:', data);
                    
                    // 为了演示，我们可以显示一个提示
                    showArchUpdateNotification(data.title);
                }
            }

            // 显示架构更新通知
            function showArchUpdateNotification(title) {
                // 检查是否已存在通知元素
                let notification = document.getElementById('arch-update-notification');
                if (!notification) {
                    notification = document.createElement('div');
                    notification.id = 'arch-update-notification';
                    notification.className = 'fixed top-4 right-4 bg-white border border-primary text-primary px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300 opacity-0 transform translate-y-[-20px]';
                    document.body.appendChild(notification);
                }
                
                notification.textContent = title;
                
                // 显示通知
                setTimeout(() => {
                    notification.classList.remove('opacity-0', 'translate-y-[-20px]');
                }, 10);
                
                // 3秒后隐藏通知
                setTimeout(() => {
                    notification.classList.add('opacity-0', 'translate-y-[-20px]');
                }, 3000);
            }

            // 绑定架构类型切换事件
            for (const [buttonId, contentId] of Object.entries(archButtons)) {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.addEventListener('click', function() {
                        // 切换按钮样式
                        for (const btn of Object.keys(archButtons)) {
                            const archBtn = document.getElementById(btn);
                            if (archBtn) {
                                archBtn.className = 'whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm flex items-center hover:bg-neutral-50 transition-all-300';
                            }
                        }
                        this.className = 'whitespace-nowrap px-3 py-1.5 rounded-md bg-primary text-white text-sm flex items-center transition-all-300';

                        // 切换内容显示
                        for (const content of Object.values(archButtons)) {
                            const archContent = document.getElementById(content);
                            if (archContent) {
                                archContent.classList.add('hidden');
                            }
                        }
                        const activeArchContent = document.getElementById(contentId);
                        if (activeArchContent) {
                            activeArchContent.classList.remove('hidden');
                        }
                        
                        // 更新当前架构类型
                        currentArch = buttonId.replace('arch-', '').replace('-btn', '');
                        // 应用当前模式
                        updateArchContent(currentArch, currentMode);
                    });
                }
            }

            // 技术架构内部标签页切换
            const techTabs = {
                'tech-blueprint-tab': 'tech-blueprint-content',
                'tech-components-tab': 'tech-components-content',
                'performance-baseline-tab': 'performance-baseline-content',
                'high-availability-tab': 'high-availability-content'
            };

            // 绑定技术架构标签页切换事件
            const techNavButtons = document.querySelectorAll('#technology-architecture-content .bg-white.rounded-lg.shadow-card.p-4.mb-6 button');
            techNavButtons.forEach((button, index) => {
                button.addEventListener('click', function() {
                    // 切换按钮样式
                    techNavButtons.forEach(btn => {
                        btn.className = 'whitespace-nowrap px-3 py-1.5 rounded-md bg-white text-neutral-700 border border-neutral-200 text-sm hover:bg-neutral-50 transition-all-300';
                    });
                    this.className = 'whitespace-nowrap px-3 py-1.5 rounded-md bg-secondary text-white text-sm transition-all-300';

                    // 切换内容显示
                    const contentKeys = ['tech-blueprint-content', 'tech-components-content', 'performance-baseline-content', 'high-availability-content'];
                    contentKeys.forEach(contentId => {
                        const content = document.getElementById(contentId);
                        if (content) {
                            content.classList.add('hidden');
                        }
                    });
                    const activeContent = document.getElementById(contentKeys[index]);
                    if (activeContent) {
                        activeContent.classList.remove('hidden');
                    }
                });
            });

            // 技术架构蓝图交互功能
            
            // 技术层详情数据
            const techLayerDetails = {
                'frontend': {
                    title: 'Web应用',
                    content: `
                        <p><strong>主要职责：</strong>提供Web端用户界面，实现响应式设计，支持主流浏览器。</p>
                        <p><strong>核心技术：</strong>React/Vue框架、TypeScript、Webpack/Vite构建工具。</p>
                        <p><strong>性能特性：</strong>支持代码分割、懒加载、服务端渲染等优化手段。</p>
                        <p><strong>安全措施：</strong>XSS防护、CSRF防护、内容安全策略(CSP)。</p>
                        <p><strong>部署模式：</strong>CDN分发、Docker容器化部署。</p>
                    `
                },
                'mobile': {
                    title: '移动应用',
                    content: `
                        <p><strong>主要职责：</strong>提供移动端原生用户体验，支持iOS和Android平台。</p>
                        <p><strong>核心技术：</strong>Flutter/React Native跨平台框架、原生开发。</p>
                        <p><strong>性能特性：</strong>本地缓存、离线功能、后台同步。</p>
                        <p><strong>安全措施：</strong>生物识别认证、数据加密存储、应用签名校验。</p>
                        <p><strong>部署模式：</strong>应用商店发布、企业内部分发。</p>
                    `
                },
                'h5': {
                    title: 'H5应用',
                    content: `
                        <p><strong>主要职责：</strong>提供轻量级跨设备访问能力，适配多种屏幕尺寸。</p>
                        <p><strong>核心技术：</strong>HTML5、CSS3、JavaScript、响应式框架。</p>
                        <p><strong>性能特性：</strong>轻量级打包、PWA支持、预缓存技术。</p>
                        <p><strong>安全措施：</strong>HTTPS传输、数据加密、安全沙箱。</p>
                        <p><strong>部署模式：</strong>CDN分发、服务器静态部署。</p>
                    `
                },
                'api': {
                    title: 'API网关',
                    content: `
                        <p><strong>主要职责：</strong>请求路由、负载均衡、身份认证、流量控制。</p>
                        <p><strong>核心技术：</strong>Spring Cloud Gateway、Kong、Nginx。</p>
                        <p><strong>性能特性：</strong>高性能路由转发、熔断降级、限流策略。</p>
                        <p><strong>安全措施：</strong>API鉴权、IP白名单、敏感信息过滤。</p>
                        <p><strong>部署模式：</strong>集群部署、多可用区部署。</p>
                    `
                },
                'business': {
                    title: '业务服务',
                    content: `
                        <p><strong>主要职责：</strong>实现核心业务逻辑，处理业务流程和规则。</p>
                        <p><strong>核心技术：</strong>Spring Boot、Micronaut、Quarkus等微服务框架。</p>
                        <p><strong>性能特性：</strong>服务拆分、分布式事务、缓存策略。</p>
                        <p><strong>安全措施：</strong>权限控制、数据校验、日志审计。</p>
                        <p><strong>部署模式：</strong>容器化部署、服务网格治理。</p>
                    `
                },
                'integration': {
                    title: '集成服务',
                    content: `
                        <p><strong>主要职责：</strong>负责与外部系统对接，实现数据交换和服务集成。</p>
                        <p><strong>核心技术：</strong>ESB、ETL工具、WebService、RESTful API。</p>
                        <p><strong>性能特性：</strong>消息队列、批量处理、异步通信。</p>
                        <p><strong>安全措施：</strong>加密传输、签名验证、接口限流。</p>
                        <p><strong>部署模式：</strong>高可用集群、独立部署。</p>
                    `
                },
                'mq': {
                    title: '消息队列',
                    content: `
                        <p><strong>主要职责：</strong>实现系统间异步通信，解耦系统组件。</p>
                        <p><strong>核心技术：</strong>Kafka、RabbitMQ、RocketMQ。</p>
                        <p><strong>性能特性：</strong>高吞吐量、低延迟、消息持久化。</p>
                        <p><strong>安全措施：</strong>认证授权、数据加密、访问控制。</p>
                        <p><strong>部署模式：</strong>集群部署、多副本机制、灾备方案。</p>
                    `
                },
                'cache': {
                    title: '缓存系统',
                    content: `
                        <p><strong>主要职责：</strong>提供高性能数据访问，减轻数据库压力。</p>
                        <p><strong>核心技术：</strong>Redis、Memcached、Caffeine。</p>
                        <p><strong>性能特性：</strong>内存存储、数据过期策略、持久化机制。</p>
                        <p><strong>安全措施：</strong>访问密码、网络隔离、数据加密。</p>
                        <p><strong>部署模式：</strong>主从复制、哨兵模式、集群部署。</p>
                    `
                },
                'search': {
                    title: '搜索引擎',
                    content: `
                        <p><strong>主要职责：</strong>提供全文检索、模糊搜索、高级筛选功能。</p>
                        <p><strong>核心技术：</strong>Elasticsearch、Solr。</p>
                        <p><strong>性能特性：</strong>倒排索引、分布式搜索、实时分析。</p>
                        <p><strong>安全措施：</strong>访问控制、索引权限、数据脱敏。</p>
                        <p><strong>部署模式：</strong>集群部署、分片复制、冷热数据分离。</p>
                    `
                },
                'workflow': {
                    title: '工作流引擎',
                    content: `
                        <p><strong>主要职责：</strong>实现业务流程自动化，支持流程定义和监控。</p>
                        <p><strong>核心技术：</strong>Flowable、Activiti、Camunda。</p>
                        <p><strong>性能特性：</strong>流程实例管理、任务分配、版本控制。</p>
                        <p><strong>安全措施：</strong>流程权限、任务授权、操作审计。</p>
                        <p><strong>部署模式：</strong>独立服务、容器化部署、高可用集群。</p>
                    `
                },
                'db': {
                    title: '关系型数据库',
                    content: `
                        <p><strong>主要职责：</strong>存储结构化数据，支持事务处理和复杂查询。</p>
                        <p><strong>核心技术：</strong>MySQL、PostgreSQL、Oracle、SQL Server。</p>
                        <p><strong>性能特性：</strong>索引优化、查询优化、连接池管理。</p>
                        <p><strong>安全措施：</strong>访问控制、数据加密、备份恢复。</p>
                        <p><strong>部署模式：</strong>主从复制、多活架构、读写分离。</p>
                    `
                },
                'nosql': {
                    title: 'NoSQL数据库',
                    content: `
                        <p><strong>主要职责：</strong>存储非结构化或半结构化数据，支持高并发访问。</p>
                        <p><strong>核心技术：</strong>MongoDB、Cassandra、DynamoDB。</p>
                        <p><strong>性能特性：</strong>高扩展性、灵活模式、分布式存储。</p>
                        <p><strong>安全措施：</strong>认证授权、数据加密、访问控制。</p>
                        <p><strong>部署模式：</strong>集群部署、分片存储、多副本机制。</p>
                    `
                },
                'dw': {
                    title: '数据仓库',
                    content: `
                        <p><strong>主要职责：</strong>集中存储企业数据，支持数据分析和报表生成。</p>
                        <p><strong>核心技术：</strong>ClickHouse、Greenplum、Snowflake。</p>
                        <p><strong>性能特性：</strong>列式存储、数据压缩、并行处理。</p>
                        <p><strong>安全措施：</strong>数据脱敏、访问控制、审计日志。</p>
                        <p><strong>部署模式：</strong>MPP架构、分布式存储、数据分层。</p>
                    `
                },
                'iaas': {
                    title: 'IaaS平台',
                    content: `
                        <p><strong>主要职责：</strong>提供基础设施资源，包括计算、网络、存储等。</p>
                        <p><strong>核心技术：</strong>阿里云ECS、腾讯云CVM、AWS EC2等云服务。</p>
                        <p><strong>性能特性：</strong>弹性伸缩、按需计费、资源监控。</p>
                        <p><strong>安全措施：</strong>VPC隔离、安全组、DDoS防护、入侵检测。</p>
                        <p><strong>部署模式：</strong>多可用区、混合云、跨云部署。</p>
                    `
                },
                'container': {
                    title: '容器平台',
                    content: `
                        <p><strong>主要职责：</strong>提供容器化部署、编排和管理能力。</p>
                        <p><strong>核心技术：</strong>Docker、Kubernetes、Rancher。</p>
                        <p><strong>性能特性：</strong>自动扩缩容、滚动更新、服务发现。</p>
                        <p><strong>安全措施：</strong>容器安全、镜像扫描、网络策略。</p>
                        <p><strong>部署模式：</strong>集群部署、多租户隔离、混合云支持。</p>
                    `
                },
                'security': {
                    title: '安全防护',
                    content: `
                        <p><strong>主要职责：</strong>提供全面的安全保障，包括认证、授权、加密等。</p>
                        <p><strong>核心技术：</strong>OAuth2.0、JWT、SSL/TLS、防火墙。</p>
                        <p><strong>性能特性：</strong>高性能加密算法、低延迟认证、分布式授权。</p>
                        <p><strong>安全措施：</strong>多因素认证、异常访问检测、数据脱敏。</p>
                        <p><strong>部署模式：</strong>分层防御、纵深防护、安全审计。</p>
                    `
                }
            };
            
            // 为技术层项目添加点击事件
            const techLayerItems = document.querySelectorAll('.tech-layer-item');
            const techLayerDetail = document.getElementById('tech-layer-detail');
            const techDetailTitle = document.getElementById('tech-detail-title');
            const techDetailContent = document.getElementById('tech-detail-content');
            const techDetailClose = document.getElementById('tech-detail-close');
            
            if (techLayerItems.length > 0) {
                techLayerItems.forEach(item => {
                    item.addEventListener('click', function() {
                        const layerType = this.getAttribute('data-layer');
                        const detail = techLayerDetails[layerType];
                        
                        if (detail && techLayerDetail && techDetailTitle && techDetailContent) {
                            techDetailTitle.textContent = detail.title;
                            techDetailContent.innerHTML = detail.content;
                            techLayerDetail.classList.remove('hidden');
                        }
                    });
                });
            }
            
            // 关闭详情面板
            if (techDetailClose) {
                techDetailClose.addEventListener('click', function() {
                    if (techLayerDetail) {
                        techLayerDetail.classList.add('hidden');
                    }
                });
            }
            
            // 全屏功能
            const techBlueprintExpand = document.getElementById('tech-blueprint-expand');
            // 修复选择器，移除包含方括号的CSS类
            const techArchitectureDiagram = document.querySelector('.bg-neutral-50.rounded-lg.p-4.relative.overflow-hidden');
            
            if (techBlueprintExpand && techArchitectureDiagram) {
                techBlueprintExpand.addEventListener('click', function() {
                    const isFullscreen = !!document.fullscreenElement;
                    
                    if (isFullscreen) {
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                    } else {
                        if (techArchitectureDiagram.requestFullscreen) {
                            techArchitectureDiagram.requestFullscreen();
                        } else if (techArchitectureDiagram.mozRequestFullScreen) {
                            techArchitectureDiagram.mozRequestFullScreen();
                        } else if (techArchitectureDiagram.webkitRequestFullscreen) {
                            techArchitectureDiagram.webkitRequestFullscreen();
                        } else if (techArchitectureDiagram.msRequestFullscreen) {
                            techArchitectureDiagram.msRequestFullscreen();
                        }
                    }
                });
            }
            
            // 导出功能
            const techBlueprintExport = document.getElementById('tech-blueprint-export');
            
            if (techBlueprintExport) {
                techBlueprintExport.addEventListener('click', function() {
                    alert('架构图导出功能已触发，实际项目中可实现为导出PNG、SVG或PDF格式。');
                    // 实际实现可使用html2canvas等库将架构图转换为图片下载
                });
            }
        });

        // 打开申请类型选择弹窗
        function openApplicationModal() {
            const modal = document.getElementById('applicationModal');
            if (modal) {
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            }
        }

        // 关闭申请类型选择弹窗
        function closeApplicationModal() {
            const modal = document.getElementById('applicationModal');
            if (modal) {
                modal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
        }

        // 打开具体申请表单
        function openApplicationForm(applicationType) {
            // 关闭类型选择弹窗
            closeApplicationModal();
            
            // 根据申请类型显示对应的表单
            const formData = getApplicationFormData(applicationType);
            
            // 创建并显示表单弹窗
            showApplicationFormModal(formData);
        }

        // 获取不同申请类型的表单数据
        function getApplicationFormData(type) {
            const formConfigs = {
                'new-system': {
                    title: '新建系统申请',
                    icon: 'fa-desktop',
                    color: 'blue',
                    fields: [
                        { label: '系统名称', type: 'text', name: 'systemName', required: true, placeholder: '请输入系统名称' },
                        { label: '系统英文名', type: 'text', name: 'systemEnglishName', required: true, placeholder: '请输入系统英文名' },
                        { label: '业务部门', type: 'select', name: 'department', required: true, options: ['风险管理部', '信息技术部', '运营管理部', '市场部'] },
                        { label: '系统负责人', type: 'text', name: 'owner', required: true, placeholder: '请输入负责人姓名' },
                        { label: '业务描述', type: 'textarea', name: 'description', required: true, placeholder: '请详细描述系统的业务背景和需求' },
                        { label: '预期上线时间', type: 'date', name: 'expectedLaunchDate', required: true },
                        { label: '预算金额(万元)', type: 'number', name: 'budget', required: false, placeholder: '请输入预算金额' },
                        { label: '附件', type: 'file', name: 'attachments', required: false }
                    ]
                },
                'arch-review': {
                    title: '架构评审申请',
                    icon: 'fa-sitemap',
                    color: 'green',
                    fields: [
                        { label: '评审项目名称', type: 'text', name: 'projectName', required: true, placeholder: '请输入项目名称' },
                        { label: '所属系统', type: 'select', name: 'system', required: true, options: ['核心业务系统', '风控系统', '数据平台', '其他'] },
                        { label: '评审类型', type: 'select', name: 'reviewType', required: true, options: ['业务架构', '应用架构', '技术架构', '数据架构', '安全架构', '综合评审'] },
                        { label: '申请人', type: 'text', name: 'applicant', required: true, placeholder: '请输入申请人姓名' },
                        { label: '架构师', type: 'text', name: 'architect', required: true, placeholder: '请输入架构师姓名' },
                        { label: '架构描述', type: 'textarea', name: 'archDescription', required: true, placeholder: '请详细描述架构设计方案' },
                        { label: '预期评审时间', type: 'date', name: 'expectedReviewDate', required: true },
                        { label: '架构设计文档', type: 'file', name: 'designDoc', required: true }
                    ]
                },
                'arch-arbitration': {
                    title: '架构仲裁申请',
                    icon: 'fa-balance-scale',
                    color: 'orange',
                    fields: [
                        { label: '仲裁主题', type: 'text', name: 'subject', required: true, placeholder: '请输入仲裁主题' },
                        { label: '相关系统', type: 'text', name: 'relatedSystem', required: true, placeholder: '请输入相关系统名称' },
                        { label: '争议描述', type: 'textarea', name: 'disputeDescription', required: true, placeholder: '请详细描述架构设计争议点' },
                        { label: '方案A', type: 'textarea', name: 'solutionA', required: true, placeholder: '请描述方案A的设计思路和优缺点' },
                        { label: '方案B', type: 'textarea', name: 'solutionB', required: true, placeholder: '请描述方案B的设计思路和优缺点' },
                        { label: '其他备选方案', type: 'textarea', name: 'otherSolutions', required: false, placeholder: '如有其他备选方案，请描述' },
                        { label: '申请人', type: 'text', name: 'applicant', required: true, placeholder: '请输入申请人姓名' },
                        { label: '期望仲裁时间', type: 'date', name: 'expectedDate', required: true },
                        { label: '相关文档', type: 'file', name: 'documents', required: false }
                    ]
                },
                'joint-review': {
                    title: '联席评审申请',
                    icon: 'fa-users',
                    color: 'purple',
                    fields: [
                        { label: '评审项目', type: 'text', name: 'projectName', required: true, placeholder: '请输入项目名称' },
                        { label: '项目类型', type: 'select', name: 'projectType', required: true, options: ['重大系统上线', '技术架构转型', '基础设施升级', '安全合规'] },
                        { label: '涉及部门', type: 'text', name: 'departments', required: true, placeholder: '请输入涉及的部门，用逗号分隔' },
                        { label: '项目背景', type: 'textarea', name: 'background', required: true, placeholder: '请详细描述项目背景和必要性' },
                        { label: '评审内容', type: 'textarea', name: 'reviewContent', required: true, placeholder: '请说明需要联席评审的具体内容' },
                        { label: '影响范围', type: 'textarea', name: 'impactScope', required: true, placeholder: '请描述项目的影响范围' },
                        { label: '申请人', type: 'text', name: 'applicant', required: true, placeholder: '请输入申请人姓名' },
                        { label: '预期评审时间', type: 'date', name: 'expectedDate', required: true },
                        { label: '项目方案文档', type: 'file', name: 'projectDoc', required: true }
                    ]
                },
                'tech-research': {
                    title: '技术调研申请',
                    icon: 'fa-search',
                    color: 'indigo',
                    fields: [
                        { label: '调研主题', type: 'text', name: 'topic', required: true, placeholder: '请输入调研主题' },
                        { label: '技术领域', type: 'select', name: 'techField', required: true, options: ['云原生', '大数据', '人工智能', '区块链', '物联网', '其他'] },
                        { label: '调研目的', type: 'textarea', name: 'purpose', required: true, placeholder: '请说明调研的目的和预期应用场景' },
                        { label: '调研内容', type: 'textarea', name: 'content', required: true, placeholder: '请列出需要调研的具体技术点' },
                        { label: '预期成果', type: 'textarea', name: 'expectedOutcome', required: true, placeholder: '请描述预期的调研成果形式' },
                        { label: '申请人', type: 'text', name: 'applicant', required: true, placeholder: '请输入申请人姓名' },
                        { label: '预计完成时间', type: 'date', name: 'deadline', required: true },
                        { label: '调研预算(万元)', type: 'number', name: 'budget', required: false, placeholder: '请输入调研预算' }
                    ]
                },
                'framework-intro': {
                    title: '技术框架引入申请',
                    icon: 'fa-code',
                    color: 'teal',
                    fields: [
                        { label: '框架名称', type: 'text', name: 'frameworkName', required: true, placeholder: '请输入框架名称' },
                        { label: '框架类型', type: 'select', name: 'frameworkType', required: true, options: ['前端框架', '后端框架', '数据库', '中间件', '开发工具', '其他'] },
                        { label: '引入理由', type: 'textarea', name: 'reason', required: true, placeholder: '请说明引入该框架的理由和必要性' },
                        { label: '技术对比', type: 'textarea', name: 'comparison', required: true, placeholder: '请对比现有技术和新框架的优劣' },
                        { label: '应用场景', type: 'textarea', name: 'useCase', required: true, placeholder: '请描述框架的具体应用场景' },
                        { label: '风险评估', type: 'textarea', name: 'riskAssessment', required: true, placeholder: '请评估引入该框架可能带来的风险' },
                        { label: '申请人', type: 'text', name: 'applicant', required: true, placeholder: '请输入申请人姓名' },
                        { label: '计划试用时间', type: 'date', name: 'trialDate', required: true },
                        { label: '技术文档', type: 'file', name: 'techDoc', required: false }
                    ]
                }
            };
            
            return formConfigs[type] || formConfigs['new-system'];
        }

        // 显示申请表单弹窗
        function showApplicationFormModal(formData) {
            // 生成表单HTML
            let formHTML = `
                <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" id="dynamicFormModal">
                    <div class="bg-white rounded-lg shadow-2xl w-full max-w-3xl mx-4 max-h-[90vh] overflow-y-auto">
                        <div class="sticky top-0 bg-gradient-to-r from-${formData.color}-500 to-${formData.color}-600 text-white px-6 py-4 flex justify-between items-center rounded-t-lg">
                            <h3 class="text-xl font-semibold flex items-center">
                                <i class="fa ${formData.icon} mr-2"></i>
                                ${formData.title}
                            </h3>
                            <button onclick="closeDynamicFormModal()" class="text-white hover:text-neutral-200 transition-colors">
                                <i class="fa fa-times text-2xl"></i>
                            </button>
                        </div>
                        
                        <form class="p-6" onsubmit="submitApplication(event)">
                            <div class="space-y-4">
            `;
            
            // 生成表单字段
            formData.fields.forEach(field => {
                formHTML += `
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-1">
                            ${field.label}
                            ${field.required ? '<span class="text-red-500">*</span>' : ''}
                        </label>
                `;
                
                if (field.type === 'textarea') {
                    formHTML += `
                        <textarea 
                            name="${field.name}" 
                            ${field.required ? 'required' : ''}
                            placeholder="${field.placeholder || ''}"
                            rows="4"
                            class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-${formData.color}-500 focus:border-transparent"
                        ></textarea>
                    `;
                } else if (field.type === 'select') {
                    formHTML += `
                        <select 
                            name="${field.name}" 
                            ${field.required ? 'required' : ''}
                            class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-${formData.color}-500 focus:border-transparent"
                        >
                            <option value="">请选择</option>
                            ${field.options.map(option => `<option value="${option}">${option}</option>`).join('')}
                        </select>
                    `;
                } else if (field.type === 'file') {
                    formHTML += `
                        <input 
                            type="file" 
                            name="${field.name}" 
                            ${field.required ? 'required' : ''}
                            class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-${formData.color}-500 focus:border-transparent"
                        />
                    `;
                } else {
                    formHTML += `
                        <input 
                            type="${field.type}" 
                            name="${field.name}" 
                            ${field.required ? 'required' : ''}
                            placeholder="${field.placeholder || ''}"
                            class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-${formData.color}-500 focus:border-transparent"
                        />
                    `;
                }
                
                formHTML += `</div>`;
            });
            
            formHTML += `
                            </div>
                            
                            <div class="mt-6 flex justify-end space-x-3">
                                <button 
                                    type="button" 
                                    onclick="closeDynamicFormModal()" 
                                    class="px-6 py-2 border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 transition-colors"
                                >
                                    取消
                                </button>
                                <button 
                                    type="submit" 
                                    class="px-6 py-2 bg-gradient-to-r from-${formData.color}-500 to-${formData.color}-600 hover:from-${formData.color}-600 hover:to-${formData.color}-700 text-white rounded-md transition-all shadow-md hover:shadow-lg"
                                >
                                    提交申请
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            `;
            
            // 将表单添加到页面
            document.body.insertAdjacentHTML('beforeend', formHTML);
            document.body.style.overflow = 'hidden';
        }

        // 关闭动态表单弹窗
        function closeDynamicFormModal() {
            const modal = document.getElementById('dynamicFormModal');
            if (modal) {
                modal.remove();
                document.body.style.overflow = 'auto';
            }
        }

        // 提交申请
        function submitApplication(event) {
            event.preventDefault();
            
            const formData = new FormData(event.target);
            const data = {};
            
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            console.log('提交的申请数据:', data);
            
            // 显示成功提示
            alert('申请已提交！申请编号：REV-2025-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0'));
            
            // 关闭弹窗
            closeDynamicFormModal();
        }

        // 架构资产筛选功能
        document.addEventListener('DOMContentLoaded', function() {
            const categoryFilter = document.getElementById('asset-category-filter');
            const statusFilter = document.getElementById('asset-status-filter');
            
            if (categoryFilter && statusFilter) {
                // 监听筛选条件变化
                categoryFilter.addEventListener('change', filterAssets);
                statusFilter.addEventListener('change', filterAssets);
                
                function filterAssets() {
                    const selectedCategory = categoryFilter.value;
                    const selectedStatus = statusFilter.value;
                    const assetRows = document.querySelectorAll('.asset-row');
                    
                    assetRows.forEach(row => {
                        const rowCategory = row.getAttribute('data-category');
                        const rowStatus = row.getAttribute('data-status');
                        
                        // 检查是否符合筛选条件
                        const categoryMatch = selectedCategory === 'all' || rowCategory === selectedCategory;
                        const statusMatch = selectedStatus === 'all' || rowStatus === selectedStatus;
                        
                        // 显示或隐藏行
                        if (categoryMatch && statusMatch) {
                            row.style.display = '';
                        } else {
                            row.style.display = 'none';
                        }
                    });
                }
            }
        });

        // 打开创建资产弹窗
        function openCreateAssetModal() {
            const modalHTML = `
                <div id="createAssetModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                    <div class="bg-white rounded-lg shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
                        <div class="sticky top-0 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-4 flex justify-between items-center rounded-t-lg">
                            <h3 class="text-xl font-semibold flex items-center">
                                <i class="fa fa-plus-circle mr-2"></i>
                                创建架构设计资产
                            </h3>
                            <button onclick="closeCreateAssetModal()" class="text-white hover:text-gray-200 transition-colors">
                                <i class="fa fa-times text-xl"></i>
                            </button>
                        </div>
                        
                        <form onsubmit="submitAssetCreation(event)" class="p-6">
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        资产名称 <span class="text-red-500">*</span>
                                    </label>
                                    <input 
                                        type="text" 
                                        name="assetName" 
                                        required 
                                        placeholder="请输入资产名称" 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                    />
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        设计分类 <span class="text-red-500">*</span>
                                    </label>
                                    <select 
                                        name="assetCategory" 
                                        required 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white"
                                    >
                                        <option value="">请选择设计分类</option>
                                        <option value="overall">总体架构设计</option>
                                        <option value="special">专题设计</option>
                                        <option value="outline">概设设计</option>
                                        <option value="detailed">详设设计</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        所属系统 <span class="text-red-500">*</span>
                                    </label>
                                    <input 
                                        type="text" 
                                        name="system" 
                                        required 
                                        placeholder="请输入所属系统" 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                    />
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        负责人 <span class="text-red-500">*</span>
                                    </label>
                                    <input 
                                        type="text" 
                                        name="owner" 
                                        required 
                                        placeholder="请输入负责人姓名" 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                    />
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        设计描述 <span class="text-red-500">*</span>
                                    </label>
                                    <textarea 
                                        name="description" 
                                        required 
                                        rows="4" 
                                        placeholder="请详细描述设计内容" 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none"
                                    ></textarea>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        设计文档
                                    </label>
                                    <input 
                                        type="file" 
                                        name="document" 
                                        accept=".pdf,.doc,.docx" 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                                    />
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-700 mb-2">
                                        发布状态 <span class="text-red-500">*</span>
                                    </label>
                                    <select 
                                        name="status" 
                                        required 
                                        class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white"
                                    >
                                        <option value="unpublished">未发布</option>
                                        <option value="published">已发布</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mt-6 flex justify-end space-x-3">
                                <button 
                                    type="button" 
                                    onclick="closeCreateAssetModal()" 
                                    class="px-6 py-2 border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 transition-colors"
                                >
                                    取消
                                </button>
                                <button 
                                    type="submit" 
                                    class="px-6 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-md transition-all shadow-md hover:shadow-lg"
                                >
                                    创建资产
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            `;
            
            document.body.insertAdjacentHTML('beforeend', modalHTML);
            document.body.style.overflow = 'hidden';
        }

        // 关闭创建资产弹窗
        function closeCreateAssetModal() {
            const modal = document.getElementById('createAssetModal');
            if (modal) {
                modal.remove();
                document.body.style.overflow = 'auto';
            }
        }

        // 提交资产创建
        function submitAssetCreation(event) {
            event.preventDefault();
            
            const formData = new FormData(event.target);
            const data = {};
            
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            console.log('创建的资产数据:', data);
            
            // 生成资产编号
            const categoryPrefixes = {
                'overall': 'ARCH',
                'special': 'SPEC',
                'outline': 'OUTL',
                'detailed': 'DETL'
            };
            const prefix = categoryPrefixes[data.assetCategory] || 'ARCH';
            const assetId = `${prefix}-2025-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`;
            
            // 显示成功提示
            alert(`资产已创建！\n资产编号：${assetId}\n资产名称：${data.assetName}`);
            
            // 关闭弹窗
            closeCreateAssetModal();
        }
    </script>
</body>
</html>